<!-- src/views/HomeView.vue -->
<template>
  <div class="home-view">
    <h3>欢迎使用AgriVista-智农云视野</h3>
    <p>在中台产品的研发过程中，会出现不同的设计规范和实现方式...</p>

    <div class="icon-links">
      <el-button type="primary" @click="navigateTo('soil')">
        <el-icon><Setting /></el-icon>
        土壤
      </el-button>
      <el-button type="primary" @click="navigateTo('weather')">
        <el-icon><Sunny /></el-icon>
        气象
      </el-button>
      <el-button type="primary" @click="navigateTo('pest')">
        <el-icon><Histogram /></el-icon>
        病虫害
      </el-button>
      <el-button type="primary" @click="navigateTo('ducumentation')">
        <el-icon><Histogram /></el-icon>
        介绍文档
      </el-button>
    </div>
  </div>
  <TodoList></TodoList>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Setting, Sunny, Histogram } from '@element-plus/icons-vue'
import TodoList from '../components/TodoList.vue'

const router = useRouter()

const navigateTo = (section) => {
  // 根据不同的 section 跳转到相应的路径
  switch (section) {
    case 'soil':
      router.push('/farmland/soil') // 假设 soil-1 是土壤模块的第一个操作
      break
    case 'weather':
      router.push('/weather') // 假设 weather-1 是气象模块的第一个操作
      break
      case 'pest':
      router.push('/farmland/pest') // 假设 weather-1 是气象模块的第一个操作
      break
    case 'ducumentation':
      router.push('/documentation') // 假设 pest-1 是病虫害模块的第一个操作
      break
    default:
      console.log('未知的 section')
  }
}
</script>

<style scoped>
.home-view {
  padding: 20px;
  text-align: center;
}

.icon-links {
  margin-top: 20px;
}

.icon-links .el-button {
  margin: 0 10px;
}
</style>